import { useState } from "react"
import { useEffect, useLayoutEffect } from "react"

export default function UseLayoutEffect1() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log("useEffect执行")
  })
  useLayoutEffect(() => {
    console.log("useLayoutEffect执行")
  })
  return (
    <div>
      <h4>
        执行时机：react生成虚拟dom => useLayoutEffect => 渲染到dom显示 =>
        useEffect
      </h4>
      <button onClick={() => setCount(count + 1)}>加1</button>
      <p>{count}</p>
    </div>
  )
}
